<template>
    <Shade @close="closeModal">
        <div class="absolute top-full mt-3 left-0">
            <div class="bg-white overflow-hidden rounded-xl border-1 border-periwinkle-gray shadow">
                <a v-for="item in propsData.subNav" :key="item.name"
                    class="cursor-pointer px-5 py-3 flex flex-row items-center gap-3 hover:opacity-80 whitespace-nowrap capitalize"
                    :href="item.path"><span>{{item.name}}</span></a>
            </div>
        </div>
    </Shade>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import Shade from '../Shade/index.vue'
const propsData = defineProps(['subNav'])
const emits = defineEmits(['navClose'])
const closeModal = () => {
    emits('navClose')
}
</script> 
